<template>
  <div class="hero-view">
    <el-row class="hero-search">
      <el-col :span="24">
        <el-input
          v-model="heroStore.pageDTO.name"
          style="width: 240px"
          placeholder="请输入英雄名称"
        />
        <el-button
          type="primary"
          style="margin-left: 20px"
          @click="heroStore.getHeroPage()"
          round
          >搜索</el-button
        >
      </el-col>
    </el-row>
    <el-row class="hero-list">
      <template v-for="item in heroStore.heroPage.datas" :key="item.name">
        <heroItem
          :heroId="item.id"
          :heroName="item.name"
          :imgUrl="'/api/file/download/' + item.imgFileId"
          @imgClick="heroImageClick"
        />
      </template>
      <el-dialog v-model="dialogVisible" title="选择" width="500">
        <span>新增推荐出装</span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button @click="dialogVisible = false">点我</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- <hero-item heroName="11" imgUrl="11"/> -->
    </el-row>
    <el-row class="hero-page">
      <el-col :span="12"> </el-col>
      <el-col :span="12">
        <el-pagination
          layout="prev, pager, next"
          :page-size="heroStore.heroPage.pageSize"
          v-model:current-page="heroStore.heroPage.pageNum"
          :total="heroStore.heroPage.total"
          @current-change="currentChange()"
        />
      </el-col>
    </el-row>
  </div>
</template>
  
<script setup>
import heroItem from "@/components/hero-item.vue";
import { ref, onMounted } from "vue";
import { useHeroStore } from "@/stores/hero";
const heroStore = useHeroStore();
onMounted(() => {
  heroStore.getHeroPage();
});
const currentChange = () => {
  heroStore.pageDTO.pageNum = heroStore.heroPage.pageNum;
  heroStore.getHeroPage();
};
const dialogVisible = ref(false);

const heroImageClick = (heroId) => {
  console.log("click", heroId);
  dialogVisible.value = true;
};
</script>
  
<style lang="less">
.hero-view {
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
  .hero-search {
    height: 50px;
  }

  .hero-list {
    min-height: 500px;
  }

  .hero-page {
    height: 50px;
  }
}
</style>